<template>
  <div class="da-bao">
    <a-tooltip :mouseEnterDelay="1" placement="right">
      <div slot="title">
        <span class="content_title">设备编号：</span>
        {{ tooltipData.deviceNo }}
        <br />
        <span class="content_title">设备状态：</span>
        {{ getHeadName(tooltipData.status) }}
        <br />
        <span class="content_title">设备效率：</span>
        {{ Number(tooltipData.efficiency * 100).toFixed(2) }}%
        <br />
        <span class="content_title">生产品种：</span>
        {{ tooltipData.productTypeTxt }}
        <br />
        <span class="content_title">更新时间：{{ $moment(tooltipData.updateTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </div>
      <svg
        width="101px"
        height="19px"
        viewBox="0 0 101 19"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="立华平面图" transform="translate(-27.000000, -212.000000)">
            <g id="编组-47" transform="translate(15.000000, 55.000000)">
              <g id="编组-40" transform="translate(12.000000, 15.000000)">
                <g id="编组-63" transform="translate(0.000000, 142.000000)">
                  <rect
                    id="矩形"
                    stroke="#8FCDFA"
                    :style="bodyStyle"
                    x="10.5"
                    y="0.5"
                    width="23"
                    height="18"
                    rx="1"
                  ></rect>
                  <text
                    id="1"
                    font-family="PingFangSC-Medium, PingFang SC"
                    font-size="12"
                    font-weight="400"
                    fill="#FFFFFF"
                  >
                    <tspan x="19.052" y="14">{{ tooltipData.deviceNo }}</tspan>
                  </text>
                  <rect
                    id="矩形备份-6"
                    stroke="#8FCDFA"
                    :style="headStyle"
                    x="0.5"
                    y="4.5"
                    width="10"
                    height="10"
                    rx="1"
                  ></rect>
                  <g id="编组-64" transform="translate(33.000000, 2.000000)">
                    <rect
                      id="矩形备份-8"
                      stroke="#8FCDFA"
                      fill="#2D69C7"
                      x="0.5"
                      y="0.5"
                      width="67"
                      height="4"
                      rx="1"
                    ></rect>
                    <ellipse
                      id="椭圆形"
                      fill="#8FCDFA"
                      cx="9.06893382"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-24"
                      fill="#8FCDFA"
                      cx="5.40441176"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份"
                      fill="#8FCDFA"
                      cx="12.7334559"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-2"
                      fill="#8FCDFA"
                      cx="16.3979779"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-3"
                      fill="#8FCDFA"
                      cx="20.0625"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-4"
                      fill="#8FCDFA"
                      cx="23.7270221"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-5"
                      fill="#8FCDFA"
                      cx="27.3915441"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-19"
                      fill="#8FCDFA"
                      cx="31.0560662"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-20"
                      fill="#8FCDFA"
                      cx="34.7205882"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-21"
                      fill="#8FCDFA"
                      cx="38.3851103"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-22"
                      fill="#8FCDFA"
                      cx="42.0496324"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-23"
                      fill="#8FCDFA"
                      cx="45.7141544"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-25"
                      fill="#8FCDFA"
                      cx="49.3786765"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-26"
                      fill="#8FCDFA"
                      cx="53.0431985"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-27"
                      fill="#8FCDFA"
                      cx="56.7077206"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-28"
                      fill="#8FCDFA"
                      cx="60.3722426"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-29"
                      fill="#8FCDFA"
                      cx="64.0367647"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                  </g>
                  <g id="编组-64" transform="translate(33.000000, 11.000000)">
                    <rect
                      id="矩形备份-8"
                      stroke="#8FCDFA"
                      fill="#2D69C7"
                      x="0.5"
                      y="0.5"
                      width="67"
                      height="4"
                      rx="1"
                    ></rect>
                    <ellipse
                      id="椭圆形"
                      fill="#8FCDFA"
                      cx="9.06893382"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-24"
                      fill="#8FCDFA"
                      cx="5.40441176"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份"
                      fill="#8FCDFA"
                      cx="12.7334559"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-2"
                      fill="#8FCDFA"
                      cx="16.3979779"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-3"
                      fill="#8FCDFA"
                      cx="20.0625"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-4"
                      fill="#8FCDFA"
                      cx="23.7270221"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-5"
                      fill="#8FCDFA"
                      cx="27.3915441"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-19"
                      fill="#8FCDFA"
                      cx="31.0560662"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-20"
                      fill="#8FCDFA"
                      cx="34.7205882"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-21"
                      fill="#8FCDFA"
                      cx="38.3851103"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-22"
                      fill="#8FCDFA"
                      cx="42.0496324"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-23"
                      fill="#8FCDFA"
                      cx="45.7141544"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-25"
                      fill="#8FCDFA"
                      cx="49.3786765"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-26"
                      fill="#8FCDFA"
                      cx="53.0431985"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-27"
                      fill="#8FCDFA"
                      cx="56.7077206"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-28"
                      fill="#8FCDFA"
                      cx="60.3722426"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                    <ellipse
                      id="椭圆形备份-29"
                      fill="#8FCDFA"
                      cx="64.0367647"
                      cy="2.5"
                      rx="1.08088235"
                      ry="1.07142857"
                    ></ellipse>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </a-tooltip>
  </div>
</template>

<script>
import { mul } from '@/utils/caculate'
export default {
  name: 'dabao',
  props: {
    data: Object,
    inline: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headStyle: {
        fill: ''
      },
      bodyStyle: {
        fill: ''
      },
      tooltipData: {
        deviceNo: 0,
        deviceName: null,
        efficiency: 0,
        productType: null,
        productTypeTxt: null,
        status: 0,
        updateTime: null
      }
    }
  },
  watch: {
    data: {
      deep: true, //true 深度监听
      immediate: true,
      handler() {
        this.draw()
      }
    }
  },

  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      if (this.data) {
        this.tooltipData = { ...this.data }
        this.headStyle.fill = this.getHeadColor(this.tooltipData.status)
        this.bodyStyle.fill = this.getBodyColor(this.tooltipData.efficiency)
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '#02DE6D'
        //停止
        case 2:
          return '#FF3C00'
        //故障
        case 3:
          return '#FF9902'
        //满纱满桶
        case 4:
          return '#00D8D3'
        //通讯失败
        case 5:
          return '#B8B8B8'
        // 计划停台
        case 6:
          return 'url(#jhttcs)'
      }
    },
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadName(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '运行'
        //停止
        case 2:
          return '停止'
        //故障
        case 3:
          return '故障'
        //满纱满桶
        case 4:
          return '满纱满桶'
        //通讯失败
        case 5:
          return '通讯失败'
        //计划停台
        case 6:
          return '计划停台'
      }
    },
    //车身颜色渐变表示车台当前效率范围
    getBodyColor(stateCode1) {
      let stateCode = Number(stateCode1) * 100
      if (stateCode >= 90) {
        return '#006BCE'
      } else if (90 > stateCode && stateCode >= 80) {
        return '#8D6F00'
      } else if (80 > stateCode && stateCode > 70) {
        return '#7F6D6A'
      } else if (stateCode <= 70) {
        return '#8214C3'
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/workshop.less';
.da-bao {
  width: 101px;
  height: 19px;
  margin: 0 auto;
}
.cls-1,
.cls-3 {
  stroke: #82c4fa;
  stroke-width: 2px;
}

.cls-1 {
  fill: url(#linear-gradient);
}

.cls-2 {
  font-size: 40px;
  fill: #fff;
  font-family: 'Microsoft YaHei';
  font-weight: 700;
}

.cls-3 {
  fill: #519aff;
}
</style>
